<template>
  <div class="all">
    <header>
      <div class="div" @click="back">
        <img src="../../../../assets/返回.png" alt="">
        <span class="solid">返回</span>
      </div>
      <div class="div">
        <span >{{title}}</span>
      </div>
      <div class="div">
        <span @click="deleteShow = true" v-show="id && id !== 0" class="solid">删除</span>
      </div>
    </header>
    <div style="min-height: calc(100vh - 44px - 50px - 60px)">
      <div class="biaoqian">
        <a class="hengGang"></a>基本信息
      </div>
      <van-field  type="text" v-model="teamData.group_name"  placeholder="请输入小组名称" label="名称" input-align="right"   />
      <van-field is-link type="text" @click="showPicker = true" readonly v-model="teamData.leader_doc_name"
                 placeholder="请选择小组组长" label="组长" input-align="right"   />

      <van-field is-link type="text" @click="id && id !== 0 ? '' : levelShow = true" readonly v-model="teamData.group_level_name"
                 placeholder="请选择小组级别" label="级别" input-align="right"   />

      <van-field is-link type="text" @click="clickSubjection" readonly v-model="teamData.group_pid_name"
                 placeholder="请选择小组隶属" label="隶属" input-align="right"   />

      <van-collapse v-model="activeNames" style="margin-top: 5px">
        <van-collapse-item  name="1">
          <template #title>
            <div class="title">
              <a class="hengGang"></a>简介
            </div>
          </template>
          <div class="textareaDiv">
            <textarea placeholder="请输入小组简介" name="" id="" v-model="teamData.group_des" maxlength="100" cols="30" rows="10"></textarea>
            <span style="display: flex;justify-content: flex-end;margin-right: 10px">{{teamData.group_des.length}}/100</span>
          </div>
        </van-collapse-item>
      </van-collapse>
    </div>
    <div class="btnBottom">
      <button class="keepBtn" @click="keep">
        保存
      </button>
    </div>
    <van-popup v-model="showPicker" round position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        @cancel="showPicker = false"
        @confirm="onConfirm"
      />
    </van-popup>
    <van-popup v-model="levelShow" round position="bottom">
      <van-picker
        show-toolbar
        :columns="levelColumns"
        @cancel="levelShow = false"
        @confirm="levelConfirm"
      />
    </van-popup>
    <van-popup v-model="subjectionShow" round position="bottom">
      <van-picker
        show-toolbar
        :columns="subjectionColumns"
        @cancel="subjectionShow = false"
        @confirm="subjectionConfirm"
      />
    </van-popup>
    <van-dialog v-model="keepShow"
                width="80%"
                confirm-button-color="#1da4f2"
                title="确认保存当前信息吗？"
                @confirm="keepConfirm()"
                show-cancel-button>
    </van-dialog>
    <van-dialog v-model="deleteShow"
                width="80%"
                confirm-button-color="#1da4f2"
                title="确认删除该小组吗？"
                @confirm="deleteConfirm()"
                show-cancel-button>
    </van-dialog>
  </div>
</template>

<script>
export default {
  name: 'OrganizationalAdd',
  data () {
    return {
      activeNames: ['1'],
      teamData: {
        group_name: '', // 小组名称
        group_pid: '', // 隶属ID
        group_pid_name: '', // 隶属ID名称
        group_level: '', // 组织等级
        group_level_name: '', // 组织等级名称
        leader_doc_user_id: '', // 组长ID
        leader_doc_name: '', // 组长姓名
        group_des: '', // 简介
        teamList: [],
        Tlist: []
      },
      // 选择组长
      showPicker: false,
      columns: [],
      // 选择级别
      levelShow: false,
      levelColumns: [
        {
          text: '二级',
          id: 2
        }, {
          text: '三级',
          id: 3
        }
      ],
      // 隶属
      subjectionShow: false,
      subjectionColumns: [],
      isEdit: this.$route.query.isEdit,
      team_id: this.$route.query.team_id,
      id: this.$route.query.id,
      keepShow: false,
      deleteShow: false
    }
  },
  computed: {
    title () {
      if (this.id && this.id !== 0) {
        document.title = '编辑'
        return '编辑'
      } else {
        document.title = '新增'
        return '新增'
      }
    }
  },
  mounted () {
    this.getTeamList()
    // 获取隶属
    this.getsubjection()
    if (this.id && this.id !== 0) {
      this.getHis()
    }
  },
  methods: {
    // 删除确认按钮
    deleteConfirm () {
      this.$http.updateTeamGroupDel({id: this.id})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.$toast('删除成功')
            this.back()
          } else {
            this.$toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
          this.$toast('您的网络有些拥挤，请稍后再试')
        })
    },
    getHis () {
      this.$http.findTeamGroupById({id: this.id})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            let data = res.data.data
            this.teamData.Tlist = data.Tlist
            this.teamData.group_name = data.group_name
            this.teamData.group_pid_name = data.lishu_name
            this.teamData.group_pid = data.group_pid

            this.teamData.leader_doc_user_id = data.leader_doc_user_id
            data.Tlist.map((curr, index) => {
              if (curr.doc_user_id == data.leader_doc_user_id) {
                this.teamData.leader_doc_name = curr.NICK_NAME
              }
            })

            this.teamData.group_level = data.group_level
            this.levelColumns.map((curr, index) => {
              if (curr.id == data.group_level) {
                this.teamData.group_level_name = curr.text
              }
            })

            if (data.group_des) {
              this.teamData.group_des = data.group_des
            } else {
              this.teamData.group_des = ''
            }
          } else {
            this.$toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
          this.$toast('您的网络有些拥挤，请稍后再试')
        })
    },
    // 点击隶属小组
    clickSubjection () {
      if (!this.teamData.group_level) {
        this.$toast('请先选择组织级别')
        return false
      } else if (this.teamData.group_level == 2) {

      } else {
        this.subjectionShow = true
      }
    },
    // 隶属确认
    subjectionConfirm (value) {
      this.teamData.group_pid_name = value.text
      this.teamData.group_pid = value.id
      this.subjectionShow = false
    },
    // 级别确认
    levelConfirm (value) {
      this.teamData.group_level_name = value.text
      this.teamData.group_level = value.id
      this.levelShow = false
      if (value.id == 2) {
        this.teamData.group_pid_name = this.teamData.teamList.team_name
      } else {
        this.teamData.group_pid_name = ''
      }
    },
    // 获取隶属
    getsubjection () {
      this.$http.findTeamGroupTwo({team_id: this.team_id})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.subjectionColumns = []
            let data = res.data.data
            data.map((curr, index) => {
              let obj = {
                text: curr.group_name,
                id: curr.id
              }
              if (this.id == curr.id) {

              } else {
                this.subjectionColumns.push(obj)
              }
            })
          } else {
            this.$toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
          this.$toast('您的网络有些拥挤，请稍后再试')
        })
    },
    // 组长
    onConfirm (value) {
      this.teamData.leader_doc_user_id = value.doc_user_id
      this.teamData.leader_doc_name = value.text
      this.showPicker = false
    },
    getTeamList () {
      this.$http.Teamdetail({id: this.team_id})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.columns = []
            let data = res.data.data
            this.teamData.teamList = res.data.data
            data.doctor.map((curr, index) => {
              let obj = {
                text: curr.NICK_NAME,
                doc_user_id: curr.USER_ID
              }
              if (curr.USER_ID == data.USER_ID) {

              } else {
                this.columns.push(obj)
              }
            })
          } else {
            this.$toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
          this.$toast('您的网络有些拥挤，请稍后再试')
        })
    },
    keep () {
      if (!this.teamData.group_name) {
        this.$toast('请输入小组名称')
        return false
      } else if (!this.teamData.leader_doc_user_id) {
        this.$toast('请选择组长')
        return false
      } else if (!this.teamData.group_level) {
        this.$toast('请选择小组级别')
        return false
      } else if (!this.teamData.group_pid && this.teamData.group_level !== 2) {
        this.$toast('请选择小组隶属')
        return false
      }
      // else if (!this.teamData.group_des) {
      //   this.$toast('请输入小组简介')
      //   return false
      // }
      this.keepShow = true
    },
    keepConfirm () {
      let id = 0
      if (this.id && this.id !== 0) {
        id = this.id
      } else {
        id = 0
      }

      let group_pid
      if (this.teamData.group_pid) {
        group_pid = this.teamData.group_pid
      } else {
        group_pid = 0
      }
      this.$http.saveTeamGroup({
        'id': id,
        'team_id': this.team_id,
        'group_pid': group_pid,
        'group_level': this.teamData.group_level,
        'group_name': this.teamData.group_name,
        'leader_doc_user_id': this.teamData.leader_doc_user_id,
        'group_des': this.teamData.group_des
      })
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.$toast('保存成功')
            this.back()
          } else {
            this.$toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
          this.$toast('您的网络有些拥挤，请稍后再试')
        })
    },
    // 返回
    back () {
      this.$router.history.go(-1)
    }
  }
}
</script>

<style scoped>
.all{
  width: 100%;
  height: 100%;
  background: #FAF9FE;
  overflow: auto;
  font-size: 15px;
  font-family: PingFang SC;
}
header{
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #E5E5E5;
  background: white;
  position: sticky;
  top: 0;
  z-index: 9;
}
.div{
  width: 33%;
  height: 100%;
  display: flex;
  align-items: center;
  font-family: "PingFang SC";
  font-size: 15px;
  font-weight: bold;
}
.div img{
  margin-right: 5px;
}
.div:nth-child(1) img{
  height: 13px;
  width: 7px;
  margin-left: 15px;
}
.div:nth-child(3) img{
  margin-right: 5px;
  width: 13px;
  height: 13px;
}
.div:nth-child(3) span{
  margin-right: 15px;
}
.div:nth-child(2){
  justify-content: center;
}
.div:nth-child(3){
  justify-content: flex-end;
}
.solid{
  color: #1DA4F2;
}
.title,
.biaoqian{
  display: flex;
  align-items: center;

  background: #FFFFFF;
  font-weight: bold;
}
.biaoqian{
  height: 44px;
}
.biaoqian span{
  display: flex;
  align-items: center;
}
.hengGang
{
  width: 2px;
  height: 15px;
  background: #1da4f2;
  margin: 0 5px 0 15px;
  display: block;
}
.title .hengGang{
  margin-left: 0;
}
.textareaDiv{
  width: 90%;
  height: 140px;
  border-radius: 10px;
  border: 1px solid #999;
  margin: 0 auto;
  overflow: hidden;
}
.textareaDiv textarea{
  width: 100%;
  height: 80%;
  resize: none;
  border: none;
  padding: 10px;
  box-sizing: border-box;
  overflow: auto;
  color: #333333;
}
.box{
  width: 92%;
  height: 60px;
  background: #FFFFFF;
  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.15);
  border-radius: 10px;
  margin: 10px auto auto auto;
  display: flex;
  align-items: center;
  padding: 0 15px;
  box-sizing: border-box;
  justify-content: space-between;
}
.box:last-child{
  margin-bottom: 20px;
}
.box span{
  display: flex;
  align-items: center;
}
.box span a{
  margin-left: 5px;
}
.photo{
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.delBtn{
  width: 60px;
  height: 29px;
  background: #FFFFFF;
  border: 1px solid #1DA4F2;
  border-radius:5px;
  font-weight: bold;
  color: #1DA4F2;
}
.btnBottom{
  width: 100%;
  height: 60px;
  background: #FFFFFF;
  position: sticky;
  bottom: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btnBottom .keepBtn{
  width: 90%;
  height: 44px;
  border-radius: 20px;
  border: none;
  font-size: 17px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #FFFFFF;
  background: linear-gradient(90deg, #1DA3F2 0%, #1DC7F2 100%);
}

</style>
